﻿.side-menu{
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 1; /* so the menu or its navicon stays above all content */
	background: #191818;
	overflow-y: auto;
	-webkit-overflow-scroll: touch; /* for smooth scrolling on mobile */
	font-size:16px;
	color: #ccc;
}

	.side-menu-head{
		font-size: 1.5em;
		font-weight: 300;
		padding: 0.5em 0.8em;
		color: #fff;
	}

	.side-menu-title{
		color: #ffffff;
		background-color: @brand-primary;
		border-color:  @brand-primary;
	}

	.menu-link {
		background: #191818;
		z-index: 10;
		height: auto;
	}

	.side-menu ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.side-menu ul,
	.side-menu .side-menu-title{
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

	.side-menu .side-menu-title{
		padding: 0.6em 0 0.6em 0.6em;
		display: block;
		color: #fff;
		font-size: 1em;
	}

	.side-menu a{
		color: #ccc;
		border: none;
		text-decoration: none;
		display: block;
	}

	.menu-link a{
		line-height: 2.3em;
	}

	.side-menu li a{
		font-size: 1.0625em;
		padding: 0em 0.8em;
		background-color: #000;
	}

	.side-menu-title a,
	.side-menu-head a{
		color: #fff;
	}

	.side-menu li a:hover,
	.side-menu li a:focus{
		background-color: #333;
	}

@media (max-width: 767px){
	.side-menu-text{
		display: none;
	}

	.side-menu-head .side-menu-icon{
		width: 44px;
		height: 44px;
		padding-left: 0;
		margin-left: -5px;
	}

	.side-menu .side-menu-title {
		display: none;
	}

	.side-menu-icon{
		width: 44px;
		height: 44px;
		padding-left: 14px;
	}

	.side-menu{
		width: 44px;
		
	}

	.side-menu li a {
		padding: 0;
	}

	.layout .side-menu{
		left: 44px;
		margin-left: -44px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.side-menu{
		width: 140px;
		
	}

	.layout .side-menu{
		left: 140px;
		margin-left: -140px;
	}

	.side-menu-icon{
		display:none;
	}
}

@media (min-width: 992px) {
	.side-menu{
		width: 180px;
	}

	.layout .side-menu{
		left: 180px;
		margin-left: -180px;
	}
}

@media (min-width: 1200px) {
	.side-menu {
		width: 220px
	}

	.layout .side-menu{
		left: 220px;
		margin-left: -220px;
	}
}

